@import './reset';
@import './setting';
@import './flex';
@import './nav';

@function getvw($w) {
    @return calc($w / 375) * 100+vw;
}

body {
    background: #e9ecf0ff;
}

.container {
    width: getvw(375);
    @extend %columnCenter;

    header {
        width: 100%;
        margin-bottom: getvw(5);

        nav {
            font-weight: 500;
        }
    }

    main {
        width: 100%;
        @extend %columnCenter;
        margin-bottom: getvw(85);

        ul {
            width: getvw(365);

            li {
                background-color: #ffffff;
                @extend %betweenCenter;
                padding: getvw(15);
                border-radius: getvw(5);
                margin-bottom: getvw(5);

                .leftBox {
                    color: #555555ff;
                    font-size: 14px;
                    font-weight: 400;

                    p {
                        font-weight: 700;
                        margin-bottom: getvw(9);
                    }
                }

                i {
                    font-size: getvw(20);
                    color: #555555ff;
                }
            }
        }

        .add {
            width: getvw(300);
            height: getvw(42);
            background: $themColor;
            color: #ffffff;
            font-size: 16px;
            font-weight: 400;
            border: none;
            position: fixed;
            bottom: getvw(40);
            left: 50%;
            transform: translateX(-50%);
        }
    }
}